<template>
  <div>
    <div class="animate__animated animate__fadeInDown login-parsel">
      <p style="font-size: 1.5rem;padding-top:1.5rem;">欢迎回来！👋</p>
      <p style="font-size: 0.9rem; color: gray; line-height: 0.1rem;padding-top:1.5rem;">
        文字描述信息示例
      </p>
      <div style="margin-top: 3.5rem">
        <el-form :rules="rules" :model="form" ref="formRef">
          <el-form-item prop="email">
            电子邮件<br />
            <input type="text" class="emailinp" v-model="form.email" />
          </el-form-item>
          <el-form-item prop="pwd">
            密码<br />
            <el-input
              v-model="form.pwd"
              style="
                width: 21.8rem;
                height: 2.7rem;
                margin-top: 0.5rem;
                border: 1px solid #d0d0d0;
                border-radius: 0.3rem;
              "
              type="password"
              placeholder="输入您的密码"
              show-password
            />
          </el-form-item>
        </el-form>
        <p style="color: #ffb900; text-align: right" @click="Toforgot">
          忘记密码？
        </p>
        <p style="text-align: center">
          <el-button class="loginbtn" :loading="isLoading" v-if="form.pwd" @click="onSubmit" >
            登录
          </el-button>
          <button
            class="loginbtncopy"
            v-if="form.email == '' || form.pwd == ''"
          >
            登录
          </button>
        </p>
        <p style="text-align: center; font-size: 1rem; color: gray;padding-top:0.5rem;">或</p>
        <div class="boox">
          <img src="/wechat.png" alt="" />
          <span>使用 微信 登录</span>
        </div>
        <div class="boox">
          <img src="/apple.png" alt="" />
          <span>使用 Apple 登录</span>
        </div>
        <p style="text-align: center; margin-top: 6rem; font-size: 0.9rem">
          <span @click="router.push('/createuser')">没有账户？</span
          ><span style="color: #ffb900" @click="router.push('/createuser')"
            >注册</span
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance, ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import "animate.css";
import {useCounterStore} from '@/stores/counter.js'
const store=useCounterStore()
const router = useRouter();
const route=useRoute()

//定义是否登录加载中
const isLoading = ref(false);



const form = ref({ email: "", pwd: "" });
const rules = reactive({
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  pwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
  ],
});


const formRef = ref<FormInstance>();

const onSubmit = async () => {
  isLoading.value = true
  //表单校验
  await formRef.value?.validate().catch((err) => {
    // console.log(err)
    throw err;
  });

  // 正式发送登录请求
  axios.post("http://127.0.0.1:3000/zjm/login", form.value).then((res) => {
    if (res.data.code == 200) {
      console.log(res.data);
      
      localStorage.setItem("userId",res.data.data._id);
      localStorage.setItem("accessToken",res.data.accessToken);
      localStorage.setItem("refreshToken",res.data.refreshToken);
      // console.log(res.data);
      store.info=res.data.data
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      router.push('/home')
      isLoading.value=false
    } else {
      ElMessage.error("邮箱或密码错误");
      isLoading.value=false
    }
  });
};

const Toforgot = () => {
  router.push({ path: "/forgot", query: { email: form.value.email } });
};

</script>

<style lang="scss" scoped>
.login-parsel {
  width: 90vw;
  height: auto;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
}
.emailinp {
  width: 85vw;
  padding: 0.3rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem;
}
::v-deep .el-input__wrapper {
  box-shadow: none;
}
.emailinp:focus {
  background: rgba(255, 185, 0, 0.1);
  border: 1px solid rgb(255, 185, 0);
}
.loginbtn {
  width: 85vw;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffb900;
  color: white;
  font-size: 1.2rem;
}
.loginbtncopy {
  width: 85vw;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffe9b0;
  color: white;
  font-size: 1.2rem;
}
.boox {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem;
  margin-top: 0.9rem;
  span {
    font-size: 1rem;
    margin-left: 4rem;
  }
  img {
    width: 2.3rem;
    height: 2.1rem;
    margin-left: 1rem;
    margin-right: 0.5rem;
  }
}
</style>